import React, { Component } from 'react'

// 导入store 仓库
import store from '../../store'
console.log('store', store);
// 操作获取store 仓库中的数据
//01: store.getState() 获取store仓库中的数据 ;
// console.log(store.getState()); => {count:0}
//02: store.dispatch(actions)  该dispatch 方法派发一个任务actions 然后修改store中的state
//03: store.subscribe(()=>{}) // 当store 中的数据被修改时, 触发subscribe 方法中的回调函数, 
// 在该函数内进行更新组件state的操作 
export default class Father extends Component {
    constructor() {
        super();
        // this.state = {
        //     name: '包不同', // 该数组为组件自身的数据
        //     ...store.getState()  // 为仓库store中的数据
        // }
        // console.log('this.state', this.state);

        // 重新订阅store 仓库中的数据,这样页面才进行更新操作
        store.subscribe(() => {
            console.log('store仓库数据变了!!!');
            this.setState({
                //count: store.getState().count
                ...store.getState()
            })
        })
    }
    state = {
        name: '包不同',
        ...store.getState()
    }
    render() {
        const { count } = this.state
        return (
            <div>
                <p>store中的count: {count}</p>
                <p>
                    <button onClick={() => this.addcount()}>count+1</button>
                </p>
            </div>
        )
    };

    // componentDidMount() {
    //     store.subscribe(() => {
    //         console.log('store仓库数据变了!!!');
    //         this.setState({
    //             //count: store.getState().count
    //             ...store.getState()
    //         })
    //     })
    // }
    addcount() {
        // 02: 派发actions任务
        store.dispatch({ type: '+', payload: 1 })
    }
}
